<template>
  <div class="echartsRadarContainer">
    <div class="titleContent">
      <div class="titleLine"></div>
      <div class="titleName">各岗位综合考核得分雷达图</div>
    </div>
    <div class="radarContentGroup">
      <div class="radarContent">
        <div class="radarReference"></div>
        <div class="groupItemName">{{ generalData.institutionName }}</div>
      </div>
       <div class="radarContent">
        <div class="radarIndicator"></div>
        <div class="groupItemName">全司均值</div>
      </div>
    </div>
    <div id="myRadar" class="echartsRadarDiv"></div>
  </div>
</template>

<script>
import 'echarts/lib/chart/radar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import * as echarts from 'echarts/lib/echarts'
import _ from 'lodash'
export default {
  props: {
    generalData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  methods: {
    // assessmentScore: "112.19"
    // averageSore: "99.29"
    // dimensionId: "66489672fc354c91bb319cf7aadf0ea1"
    // dimensionName: "合规副总"
    // parentDimensionId: "general_manager"
    // rank: "13"
    radarContent(newVal) {
      /** 得分数据*/
      const assessmentScoreData = []
      const averageSore = []
      /** 名称,均值，排名，最大值*/
      const indicatorData = []

      newVal.map(item => {
        assessmentScoreData.push(Number(item.assessmentScore))
        averageSore.push(Number(item.averageSore))
        indicatorData.push({
          name: item.dimensionName,
          assessmentScore: item.assessmentScore,
          averageSore: item.averageSore,
          rank: item.rank
        })
      })
      indicatorData.map(i => (i.max = Math.max(...assessmentScoreData, ...averageSore)))
      const source = {
        data: assessmentScoreData,
        indicator: indicatorData
      }
      const buildSeries = data => {
        const helper = data.map((item, index) => {
          const arr = new Array(data.length)
          arr.splice(index, 1, item)
          return arr
        })
        return [data, helper].map((item, index) => {
          if (index === 0) {
            return {
              type: 'radar',
              radarIndex: 0,
              tooltip: {
                show: false
              },
              data: [
                {
                  value: item,
                  name: this.generalData.institutionName,
                  symbol: 'circle',
                  itemStyle: {
                    borderWidth: 0.5,
                    borderColor: '#fff'
                  },
                  backgroundColor: '#393f52',
                  areaStyle: {
                    color: 'rgba(10, 130, 250, 0.4)'
                  },
                  lineStyle: {
                    color: '#0A82FA'
                  }
                },
                {
                  value: averageSore,
                  name: '全司均值',
                  symbol: 'circle',
                  lineStyle: {
                    color: '#56617E',
                    width: 2
                  },
                  areaStyle: {
                    color: 'rgba(64, 72, 92, 1)'
                  },
                  itemStyle: {
                    color: 'none'
                  }
                }
              ]
            }
          } else {
            const item = {
              type: 'radar',
              symbol: 'none',
              lineStyle: { // 隐藏雷达图线的颜色
                color: 'transparent'
              },
              backgroundColor: '#393f52',
              radarIndex: 1,
              zlevel: 2,
              selectedMode: false,
              tooltip: {
                show: true,
                borderWidth: 0,
                axisPointer: {
                  type: 'shadow'
                },
                textStyle: {
                  color: '#e9e9ed'
                },
                extraCssText: 'z-index: 0',
                backgroundColor: '#393f52',
                formatter: (params) => {
                  const { data } = params.data
                  return `${params.name}<br />
                    <div style='display:flex;justify-content: space-between'>
                    <div>得分</div>
                    <div>${data[0]}</div>
                    </div>
                     <div style='display:flex;justify-content: space-between;'>
                    <div>全司均值</div>
                    <div>${data[1]}</div>
                    </div>
                     <div style='display:flex;justify-content: space-between;'>
                    <div>全司排名</div>
                    <div>${data[2]}</div>
                    </div>
                    `
                }
              },
              data: []
            }
            helper.forEach((hItem, index) => {
              const cHItem = _.cloneDeep(hItem)
              cHItem[index] = averageSore[index]
              item.data.push(
                {
                  value: hItem,
                  data: [assessmentScoreData[index], averageSore[index], indicatorData[index].rank],
                  name: indicatorData[index].name
                },
                {
                  value: cHItem,
                  data: [assessmentScoreData[index], averageSore[index], indicatorData[index].rank],
                  name: indicatorData[index].name
                }
              )
            })
            return item
          }
        })
      }
      const option = {
        tooltip: {},
        radar: [
          {
            axisLine: {
              // (圆内的几条直线)坐标轴轴线相关设置
              lineStyle: {
                color: '#3A3E47'
              }
            },
            splitLine: {
              // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
              lineStyle: {
                color: '#3A3E47'
              }
            },
            splitArea: {
              // 坐标轴在 grid 区域中的分隔区域，默认不显示。
              show: true,
              areaStyle: {
                // 分隔区域的样式设置。
                color: ['transparent']
              }
            },
            name: {
              // (圆外的标签)雷达图每个指示器名称的配置项。
              formatter: value => {
                return value
              },
              textStyle: {
                fontSize: 14,
                color: '#fff',
                fontWeight: 400
              }
            },
            radius: '50%',
            indicator: source.indicator
          },
          {
            axisLine: {
              // (圆内的几条直线)坐标轴轴线相关设置
              lineStyle: {
                color: 'transparent'
              }
            },
            splitLine: {
              // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
              lineStyle: {
                color: '#3A3E47'
              }
            },
            splitArea: {
              // 坐标轴在 grid 区域中的分隔区域，默认不显示。
              show: true,
              areaStyle: {
                // 分隔区域的样式设置。
                color: ['transparent']
              }
            },
            name: {
              // (圆外的标签)雷达图每个指示器名称的配置项。
              formatter: value => {
                return value
              },
              textStyle: {
                fontSize: 14,
                color: '#fff',
                fontWeight: 400
              }
            },
            radius: '50%',
            indicator: source.indicator
          }
        ],

        series: buildSeries(source.data)
      }
      const myRadar = echarts.init(document.getElementById('myRadar'))
      // 绘制图表
      myRadar.setOption(option, true)
    }
  },
  watch: {
    generalData: {
      deep: true,
      //   immediate: true,
      handler(newVal, oldVal) {
        this.radarContent(newVal.performanceInstitutionVO)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.echartsRadarContainer {
  .titleContent {
    display: flex;
    align-items: center;
    line-height: 22px;
    padding: 16px 0px 8px 11px;
    .titleLine {
      width: 4px;
      height: 15px;
      background: #0a82fa;
    }
    .titleName {
      font-size: 16px;
      padding-left: 6px;
      font-weight: 400;
      color: #ffffff;
    }
  }

  .radarContentGroup {
    display: flex;
    .radarContent {
      display: flex;
      align-items: center;
      padding-left: 20px;
      .radarIndicator {
        width: 6px;
        height: 6px;
        margin-right: 6px;
        background: #56617e;
        border-radius: 1px;
      }
      .radarReference {
        width: 6px;
        height: 6px;
        margin-right: 6px;
        background: #0a82fa;
        border-radius: 1px;
      }
      .groupItemName {
        color: #727687;
      }
    }
  }
}
.echartsRadarDiv {
  height: 240px;
}
</style>
